<ng-container *ngIf="connected$ | async; else disconnected">
  <ion-icon
    *ngIf="pkg.error; else noError"
    class="warning-icon"
    name="warning-outline"
    size="small"
    color="warning"
  ></ion-icon>
  <ng-template #noError>
    <ion-spinner
      *ngIf="pkg.transitioning; else bulb"
      class="spinner"
      size="small"
      color="primary"
    ></ion-spinner>
    <ng-template #bulb>
      <div
        class="bulb"
        [style.background-color]="
          'var(--ion-color-' + pkg.primaryRendering.color + ')'
        "
        [style.color]="'var(--ion-color-' + pkg.primaryRendering.color + ')'"
      ></div>
    </ng-template>
  </ng-template>
</ng-container>

<ng-template #disconnected>
  <div class="bulb" [style.background-color]="'var(--ion-color-dark)'"></div>
</ng-template>
